<template>
  <div class="open-secondary">
    <BackPreviou class="back-btn" @showMain="handelClick" />
    <div class="content">
      <Form
        :model="formState"
        style="width: 1010px"
        :label-col="{ style: { width: '210px' } }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        label-align="right"
        :colon="false"
      >
        <div v-if="secondaryName === 'JE_OPEN_WX'" class="open-wechat-config">
          <FormItem name="OPEN_WX_CORPID" class="OPEN_WX_CORPID" label="CorpID">
            <Input v-model:value="formState.OPEN_WX_CORPID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.wxCorpIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="OPEN_WX_CORPSECRET"
            class="OPEN_WX_CORPSECRET"
            :label="$t('open.secondary.wxCorpSecret')"
          >
            <Input v-model:value="formState.OPEN_WX_CORPSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.wxCorpSecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="OPEN_WX_SECRET"
            class="OPEN_WX_SECRET"
            :label="$t('open.secondary.wxNoteCorpSecret')"
          >
            <Input v-model:value="formState.OPEN_WX_SECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.wxNoteCorpSecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="OPEN_WX_AGENTID" class="OPEN_WX_AGENTID" label="AgentID">
            <Input v-model:value="formState.OPEN_WX_AGENTID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.wxAgentIDTip') }}</i>
            </div>
          </FormItem></div
        >
        <div v-if="secondaryName === 'JE_OPEN_DD'" class="open-dingding-config"
          ><FormItem name="OPEN_DD_APPKEY" class="OPEN_DD_APPKEY" label="AppKey">
            <Input v-model:value="formState.OPEN_DD_APPKEY" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.ddAppKeyTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="OPEN_DD_APPSECRET" class="OPEN_DD_APPSECRET" label="AppSecret">
            <Input v-model:value="formState.OPEN_DD_APPSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.ddAppSecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="OPEN_DD_CORPID" class="OPEN_DD_CORPID" label="CorpId">
            <Input v-model:value="formState.OPEN_DD_CORPID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.ddCorpIdTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="OPEN_DD_AGENTID" class="OPEN_DD_AGENTID" label="AgentID">
            <Input v-model:value="formState.OPEN_DD_AGENTID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.ddAgentIDTip') }}</i>
            </div>
          </FormItem></div
        >
        <div v-if="secondaryName === 'JE_OPEN_WELINK'" class="open-welink-config"
          ><FormItem name="OPEN_WL_CLIENTID" class="OPEN_WL_CLIENTID" label="ClientID ">
            <Input v-model:value="formState.OPEN_WL_CLIENTID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.weClientIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="OPEN_WL_CLIENTSECRET" class="OPEN_WL_CLIENTSECRET" label="ClientSecret ">
            <Input v-model:value="formState.OPEN_WL_CLIENTSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.weClientSecretTip') }}</i>
            </div>
          </FormItem>
        </div>
        <div v-if="secondaryName === 'JE_OPEN_FS'" class="open-feishu-config">
          <FormItem name="AppID" class="AppID" label="OPEN_FS_APPID ">
            <Input v-model:value="formState.OPEN_FS_APPID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.OPEN_FS_APPIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="AppSecret" class="AppSecret" label="OPEN_FS_APPSECRET">
            <Input v-model:value="formState.OPEN_FS_APPSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('open.secondary.OPEN_FS_APPSECRETTip') }}</i>
            </div>
          </FormItem>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
  import { defineComponent, onUnmounted, reactive } from 'vue';
  import { Input, Form, Modal } from '@jecloud/ui';
  import BackPreviou from '@/components/back-previou.vue';
  import { useOpenDialog } from '@/hooks';
  import { saveConfigData } from '@/api';
  import VueEvent from '@/helper/model/event';
  import { onScroll } from '@/utils/utils';

  export default defineComponent({
    name: 'OpenSecondary',
    components: {
      BackPreviou,
      Form,
      FormItem: Form.Item,
      Input,
    },
    props: {
      secondaryName: {
        type: String,
        default: 'JE_OPEN_WX',
      },
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['showMain'],
    setup(props, { emit }) {
      const codeConfig = {
        JE_OPEN_WX: 'open-wechat-config',
        JE_OPEN_DD: 'open-dingding-config',
        JE_OPEN_FS: 'open-feishu-config',
        JE_OPEN_WELINK: 'open-welink-config',
      };
      // 关闭页面
      const closePage = () => {
        emit('showMain', false);
      };

      // 点击返回的函数
      const handelClick = () => {
        VueEvent.emit('saveResult', isChange());
        if (isChange()) return closePage();
        useOpenDialog({
          attribute: codeConfig[props.secondaryName],
          allFields: JSON.stringify(formState),
        });
      };

      let formState = reactive({
        OPEN_WX_CORPID: 'wx1fc3a25d9cd161ea',
        OPEN_WX_CORPSECRET: '1ff601dbaf53c3a8100bdf663fe490c1',
        OPEN_WX_SECRET: 'dev.suanbanyun.com',
        OPEN_WX_AGENTID: 'dev.suanbanyun.com',
        OPEN_DD_APPKEY: '',
        OPEN_DD_APPSECRET: '',
        OPEN_DD_CORPID: '',
        OPEN_DD_AGENTID: '',
        OPEN_WL_CLIENTID: '',
        OPEN_WL_CLIENTSECRET: '',
        OPEN_FS_APPID: '',
        OPEN_FS_APPSECRET: '',
      });

      let meta = {};
      let res = {};
      // 转变数据
      const changeDataType = (parame) => {
        res = parame.filter((item) => {
          return (
            item.code === 'open-wechat-config' ||
            item.code === 'open-dingding-config' ||
            item.code === 'open-feishu-config' ||
            item.code === 'open-welink-config'
          );
        });
        res.find((td) => {
          td.items.find((item) => {
            formState[item.code] = item.value;
          });
        });
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType(props.dataAll);

      // 是否改变
      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };

      // 保存回调
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: codeConfig[props.secondaryName],
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            Modal.notice('保存成功', 'success'),
            VueEvent.emit('changeAllData', {
              item: codeConfig[props.secondaryName],
              formState,
            }),
          );
        } else {
          // 如果显示了子页面就不提示
          Modal.notice('无数据操作!', 'info');
        }
      };

      // 搜索滚动
      const onScrollDe = () => {
        setTimeout(() => {
          onScroll();
        }, 0);
      };
      VueEvent.on('closeEvent', closePage);
      VueEvent.on('toolbarSaveEventS', clickCallback);
      VueEvent.on('fadeScrollSed', onScrollDe);
      VueEvent.on('isSave', handelClick);
      onUnmounted(() => {
        VueEvent.off('closeEvent', closePage);
        VueEvent.off('fadeScrollSed', onScrollDe);
        VueEvent.off('isSave', handelClick);
        VueEvent.off('toolbarSaveEventS', clickCallback);
      });

      return { handelClick, formState };
    },
  });
</script>

<style lang="less" scoped>
  .open-secondary {
    margin-left: -100px;
    .content {
      padding-top: 20px;
    }
  }
</style>
